<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/footer.css" media="screen" title="no title" charset="utf-8">
    <style media="screen">
        * {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", "Hiragino Sans GB";
        }

        .wrap {
            width: 70%;
            margin: 0 auto;
        }

        .header {
            width: 1000px;
            height: 100px;
            line-height: 100px;
            text-align: left;
            margin: 0 auto;
        }

        .header> img {
            height: 80%;
            vertical-align: middle;
        }

        .header> span {
            width: 120px;
            height: 40px;
            line-height: 40px;
            border-left: 1px solid lightgray;
            font-size: 1.2em;
            vertical-align: middle;
            display: inline-block;
            text-align: center;
            margin-left: 15px;
        }

        .header_login {
            float: right;
            height: 30px;
            margin-top: 34px;
        }

        .header_login span {
            color: gray;
            margin-right: 10px;
        }

        .header_login a {
            text-decoration: none;
            cursor: pointer;
            color: black;
        }

        .header_login a:hover {
            color: red;
        }

        hr {
            width: 1000px;
            height: 1px;
            border: none;
            border-top: 1px solid lightgray;
            margin: 0 auto;
        }

        .content {
            width: 1000px;
            margin: 0 auto;
            margin-top: 50px;
        }

        .reginster_wrap {
            width: 400px;
            margin: 0 auto;
        }

        .user_wrap {
            width: 100%;
            height: 52px;
            line-height: 52px;
            border: 1px solid rgb(221, 221, 221);
            position: relative;
        }

        .user_wrap label {
            padding-left: 20px;
        }

        .input_wrap {
            width: 55%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            margin: 0 auto;
        }

        .input_wrap input {
            border: none;
            outline: 0;
            background: white;
            font-size: 16px;
            width: 100%;
            color: gray;
        }
        /*对号图标*/

        .ture_img {
            width: 20px;
            height: 20px;
            background: url(source/register_img/login.png) no-repeat -5px -33px;
            /*background-size: 100% 100%;*/
            float: right;
            margin-top: 16px;
            margin-right: 16px;
            display: none;
        }

        .show {
            color: #c5c5c5;
            height: 27px;
            font-size: 12px;
            padding-top: 5px;
        }
        /*验证码*/

        .SecurityCode {
            width: 85px;
            height: 44px;
            /*background: url(source/register_img/background.jpg) no-repeat;
            background-size: 100% 100%;*/
            float: right;
            margin-top: 4px;
            margin-right: 4px;
            text-align: center;
            line-height: 44px;
            letter-spacing: 2px;
            cursor: pointer;
        }
        /*协议的父级*/

        .agreeOn_wrap {
            width: 100%;
            font-size: 12px;
        }

        .agreeOn_wrap input {
            width: 18px;
            height: 18px;
            vertical-align: text-top;
        }

        .agreeOn_wrap a {
            text-decoration: none;
            color: blue;
            cursor: pointer;
        }
        /*立即注册按钮父级*/

        .button_wrap {
            width: 100%;
            height: 54px;
            line-height: 54px;
        }

        .button_wrap input {
            width: 100%;
            height: 100%;
            background: rgb(238, 34, 34);
            color: white;
            border: none;
            outline: 0;
            font-size: 16px;
            cursor: pointer;
        }
        /*协议同不同意底下的字体*/

        .showAgree {
            width: 16px;
            height: 16px;
            border-radius: 8px;
            background: url(source/register_img/2.png) no-repeat;
            background-size: 100% 100%;
            float: left;
            vertical-align: top;
            margin-top: 1px;
            display: none;
        }

        .showOn {
            margin-left: 5px;
            color: red;
            display: none;
        }

        .moban {
            width: 100%;
            position: absolute;
            top: 0;
            display: none;
        }
        /*协议内容外层div*/

        .agreeOnContent_wrap {
            width: 800px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 1000;
            display: none;
            border: 3px solid rgb(196, 196, 196);
            background: white;
        }
        /*协议内容开头*/

        .agreeOnHeader {
            width: 790px;
            height: 31px;
            line-height: 31px;
            padding: 0px 5px 0px 5px;
            background: rgb(236, 236, 236);
            position: relative;
            top: 0;
        }

        .agreeOnHeader a {
            width: 13px;
            height: 13px;
            background: url(source/register_img/dialog.png) no-repeat;
            background-size: 100% 100%;
            float: right;
            margin-top: 9px;
            cursor: pointer;
        }

        .agreeOnContent {
            padding: 0px 10px 0px 10px;
        }

        .agreeOnBottom {
            width: 100%;
            height: 54px;
            position: absolute;
            bottom: 20px;
            text-align: center;
        }

        .closeAgreeOnBottom {
            width: 400px;
            height: 100%;
            background: rgb(238, 34, 34);
            color: white;
            outline: 0;
            font-size: 16px;
            cursor: pointer;
            border: none;
        }

        #fontA {
            font-size: 0.5rem;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 头部 -->
        <header class="header">
            <img src="source/register_img/login.jpg" alt="" />
            <span>欢迎注册</span>
            <div class="header_login">
                <span>已有账号</span><a href="login.html">请登录</a>
            </div>
        </header>
        <hr />
        <!-- 内容 -->
        <div class="content">
            <!-- 注册部分的外层div -->
            <form  action="php/insert.php" method="post" onsubmit="return checkSubmit()">
                <div class="reginster_wrap">
                    <!-- 用户名一行 -->
                    <div class="user_wrap">
                        <label style="letter-spacing:8px">用户名</label>
                        <div class="input_wrap">
                            <input type="text" name="userName" value="" placeholder="您的用户名和登录名" onBlur='BlurName();userWrap[0].style.border ="1px solid rgb(221, 221, 221)"'>
                        </div>
                        <!-- 对号 -->
                        <i class="ture_img"></i>
                    </div>
                    <div class="show"><i class="show_img"></i><span class="showScript"></span></div>
                    <!-- 设置密码 -->
                    <div class="user_wrap">
                        <label>设置密码</label>
                        <div class="input_wrap">
                            <input type="password" name="passWord" value="" placeholder="请您输入密码" onBlur='BlurPassword();userWrap[1].style.border ="1px solid rgb(221, 221, 221)"'>
                        </div>
                        <i class="ture_img"></i>
                    </div>
                    <div class="show"><i class="show_img"></i><span class="showScript"></span></div>
                    <!-- 确认密码 -->
                    <div class="user_wrap">
                        <label>确认密码</label>
                        <div class="input_wrap">
                            <input type="password" name="confirmPassword" value="" placeholder="请您再次输入密码" onblur='BlurConfirmPassword();userWrap[2].style.border ="1px solid rgb(221, 221, 221)"'>
                        </div>
                        <i class="ture_img"></i>
                    </div>
                    <div class="show"><i class="show_img"></i><span class="showScript"></span></div>
                    <!-- 邮箱 -->
                    <div class="user_wrap">
                        <label style="letter-spacing:32px">邮箱</label>
                        <div class="input_wrap">
                            <input type="text" name="email" value="" placeholder="请您输入邮箱账号" onblur='BlurEmail();userWrap[3].style.border ="1px solid rgb(221, 221, 221)"'>
                        </div>
                        <i class="ture_img"></i>
                    </div>
                    <div class="show"><i class="show_img"></i><span class="showScript"></span></div>
                    <!-- 手机号 -->
                    <div class="user_wrap">
                        <label style="letter-spacing:8px">手机号</label>
                        <div class="input_wrap">
                            <input type="text" name="phone" value="" placeholder="建议使用常用手机" onblur='BlurPhone();userWrap[4].style.border ="1px solid rgb(221, 221, 221)"'>
                        </div>
                        <i class="ture_img"></i>
                    </div>
                    <div class="show"><i class="show_img"></i><span class="showScript"></span></div>
                    <!-- 验证码 -->
                    <div class="user_wrap">
                        <label style="letter-spacing:8px">验证码</label>
                        <div class="input_wrap">
                            <input type="text" name="securityCode" value="" placeholder="请输入验证码" onblur='BlurSecurityCode();userWrap[5].style.border ="1px solid rgb(221, 221, 221)"'>
                        </div>
                        <!-- 验证码 -->
                        <div class="SecurityCode">
                            <img src="captcha.php" onclick="this.src='captcha.php?'+Math.random();"></img>
                        </div>
                    </div>
                    <div class="show"><i class="show_img"></i><span class="showScript"></span></div>
                    <!-- 协议的父级 -->
                    <div class="agreeOn_wrap">
                        <input type="checkbox" name="agreeOn" value="" checked="checked">
                        <span>我已阅读并同意</span>
                        <a class="agreeOnBtn">《萌宠网服务协议》</a>
                    </div>
                    <div class="show"><i class="showAgree"></i><span class="showOn">请您同意该协议并勾选</span></div>
                    <!-- 注册按钮 -->
                    <div class="button_wrap">
                        <input type="submit" name="submit" value="立即注册" >
                    </div>
                </div>
            </form>
        </div>
        <!-- 协议的内容 -->

    </div>

    <div class="moban">

    </div>
    <div class="agreeOnContent_wrap">
        <div class="agreeOnHeader">
            <span>萌宠网用户协议</span>
            <a class="closeAgreeOn"></a>
        </div>
        <div class="agreeOnContent">
            <p>1、服务条款的确认和接纳</p>
            <p> 波奇网的所有权和运作权归光橙公司所有。用户接受本协议选择：" 已仔细阅读并同意"服务协议"，完成注册，这表示用户与光橙公司达成协议并接受所有的服务条款。
            </p>
            <p>2、服务简介</p>
            <p> 光橙公司运用自己的操作系统通过国际互联网络为用户提供各项服务，而这种服务是免费的。用户必须： </p>
            <p>（1）提供设备，包括个人电脑一台、调制解调器一个及配备上网装置。 </p>
            <p>（2）个人上网和支付与此服务有关的电话费用。考虑到光橙公司产品服务的重要性，用户同意： </p>
            <p>（a）提供及时、详尽及准确的个人资料。 </p>
            <p>（b）不断更新注册资料，符合及时、详尽准确的要求。所有原始键入的资料将引用为注册资料。 </p>
            <p>（3）光橙公司保留随时变更、中断或终止部分或全部网络服务的权利。另外，用户可授权光橙公司向第三方透露其注册资料，否则光橙公司不能公开用户的姓名、住址、出件地址、电子邮箱、帐号。除非： </p>
            <p>（a）用户要求光橙公司或授权某人通过电子邮件服务或其他方式透露这些信息。 </p>
            <p>（b）相应的法律、法规要求及程序服务需要光橙公司提供用户的个人资料。如果用户提供的资料不准确，不真实，不合法有效，光橙公司保留结束用户使用光橙公司各项服务的权利。用户在享用光橙公司各项服务的同时，同意接受光橙公司提供的各类信息服务。
            </p>

        </div>
        <div class="agreeOnBottom">
            <button type="button" name="button" class="closeAgreeOnBottom">同意并继续</button>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href="#">关于我们</a></li>|
            <li><a href="#">友情链接</a></li>|
            <li><a href="#">诚聘英才</a></li>|
            <li><a href="#">联系我们</a></li>|
            <li><a href="#">网站地图</a></li>|
            <li><a href="#">意见反馈</a></li>|
            <li><a href="#">帮助中心</a></li>|
            <li><a href="#">客服热线：123456789</a></li>
        </ul>
        <p id="fontA">
            Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
        </p>
    </div>
</body>

</html>
<script src="js/register.js" charset="utf-8"></script>
<script type="text/javascript">
    //获取class函数
    function byClass($) {
        return document.getElementsByClassName($) ? document.getElementsByClassName($) : -1;
    }
    var agreeOnBtn = byClass("agreeOnBtn")[0];
    var agOnCon = byClass("agreeOnContent_wrap")[0];
    var closeAgreeOn = byClass("closeAgreeOn")[0];
    var moban = byClass("moban")[0];
    var closeBtn = byClass("closeAgreeOnBottom")[0];
    moban.style.height = window.innerHeight + 'px';
    moban.style.backgroundColor = "rgba(217,217,217,0.7)";
    agreeOnBtn.onclick = function() {
        agOnCon.style.display = "block";
        moban.style.display = "block";
    }
    closeAgreeOn.onclick = function() {
        agOnCon.style.display = "none";
        moban.style.display = "none";
    }
    closeBtn.onclick = function() {
        agOnCon.style.display = "none";
        moban.style.display = "none";
    }
</script>
